<template>
	<view class="padding">
		<view class="flex justify-start body ">
			<view class="body-image">
				<image v-if="order.coverPhoto" :src="order.coverPhoto"></image>
				<image v-else src="/static/noPic.png"></image>
			</view>
			<view class="body-c flex flex-direction justify-between">
				<view><text class="c-title">{{order.prodName}}</text></view>
				<view>
					<view class="text-gray">
						{{order.openTime}}开团
					</view>
					<view><text class="text-gray">{{order.userCount}}人拼团价：</text><text
							class="group-price">￥{{order.groupPrice}}</text></view>
					<view><text class="text-gray">单买价：￥{{order.price}}</text></view>
				</view>
			</view>
		</view>
		<view class="bg-white detail ">
			<view class="endTime text-center">
				<view class="sub">
					<text>{{order.endTime}}结束</text>
				</view>
			</view>
			<view class="text-center group-count">
				<text>仅剩</text>
				<text style="color:#e1212b">{{order.userCount-order.groupCount}}人</text>
				<text>拼团成功，快邀请小伙伴参加吧！</text>
			</view>
			<view class=" flex justify-between user" v-for="(member,index) in order.members" :key="index">
				<view>
					<view class="flex justify-start">
						<view>
							<image :src="personIco"></image>
						</view>
						<view class="user-title">
							<view class="user-title-name"><text>{{member.buyerName}}</text></view>
							<view class="user-title-time"><text>{{member.createTime}}</text></view>
						</view>
					</view>
				</view>
				<view class="user-group-b">
					<text>{{member.stateName}}</text>
				</view>
			</view>

			<view class="btn-info">
				<!-- #ifdef H5 -->
				<!--@click="onShareGroupProduct()"-->
				<view class="btn" >
					<text>右上角分享，邀请好友参团</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn" open-type="share">邀请好友参团</button>
				<!-- #endif -->
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getMyProductGroupOrder
	} from '@/api/order/orderApi.js';
	import {
		getShareWechatParam
	} from '../../api/user/userApi.js';
	// #ifdef H5
	import weixin from 'weixin-js-sdk'
	// #endif
	
	import conf from '../../conf/config.js'

	export default {
		data() {
			return {
				orderId: '',
				personIco:'',
				order: {}
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.personIco = conf.commonBaseUrl+'h5/static/person.jpg'
			this._loadGroupProductOrder();
			
		},
		onShareAppMessage(res) {
			//console.log('onShareAppMessage',res);
			let _url = "/pages/goods/groupGoods"
			_url += "?productId=" + this.order.productId + "&groupId=" + this.order.groupId + "&shopId=" + this
				.order.shopId;
			return {
				title: "【" + this.order.userCount + "人团】" + this.order.prodName,
				path: _url,
				imageUrl: this.order.coverPhoto,
			}
		},

		methods: {
			_loadGroupProductOrder: function() {
				let _that = this;
				getMyProductGroupOrder({
					page: 1,
					row: 1,
					orderId: this.orderId
				}).then(_data => {
					_that.order = _data[0];
					// #ifdef H5
					this._getWeixinConfig();
					// #endif
				})
			},
			onShareGroupProduct: function() {
				let _url = window.location.origin + "/#/pages/goods/groupGoods"
				_url += "?productId=" + this.order.productId + "&groupId=" + this.order.groupId + "&shopId=" + this
					.order.shopId;
				weixin.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareMoment'],
				});
				weixin.onShareAppMessage(options => {
					// 自定义分享内容
					return {
						title: "【" + this.order.userCount + "人团】" + this.order.prodName,
						path: _url,
						imageUrl: this.order.coverPhoto,
					};
				});
			},
			_getWeixinConfig: function() {
				let currentPageUrl = encodeURIComponent(window.location.href);
				let _that = this;
				getShareWechatParam({
					url: currentPageUrl
				}).then(_data => {
					_that.initShare(_data.data);
				})
			},
			initShare: function(_config) {
				weixin.config({
					debug: true,
					appId: _config.appId,
					timestamp: _config.timestamp,
					nonceStr: _config.nonceStr,
					signature: _config.signature,
					jsApiList: [
						'onMenuShareTimeLine',
						'onMenuShareAppMessAge'
					]
				});
				let _that = this;
				weixin.ready(function() {
					let _url = window.location.origin + "/#/pages/goods/groupGoods"
					_url += "?productId=" + _that.order.productId + "&groupId=" + _that.order.groupId +
						"&shopId=" + _that.order.shopId;
					weixin.onMenuShareTimeline({
							title: "【" + _that.order.userCount + "人团】" + _that.order.prodName,
							desc: "【" + _that.order.userCount + "人团】" + _that.order.prodName,
							link: _url,
							imgUrl: _that.order.coverPhoto,
							success: function() {
								console.log('成功')
							},
							cancel: function() {
								console.log('成功')
							},
							fail: function() {
								console.log('成功')
							}
						}),
						weixin.onMenuShareAppMessage({
							title: "【" + _that.order.userCount + "人团】" + _that.order.prodName,
							desc: "【" + _that.order.userCount + "人团】" + _that.order.prodName,
							link: _url,
							imgUrl: _that.order.coverPhoto,
							success: function() {
								console.log('成功')
							},
							cancel: function() {
								console.log('成功')
							},
							fail: function() {
								console.log('成功')
							}
						})
				})
			}
		}
	}
</script>

<style lang="scss">
	.body {
		background-color: #fff;
		padding: 15px;
		border-bottom: 2upx solid #f1f1f1;
		border-radius: 10upx;

		image {
			width: 200upx;
			height: 200upx;
			border-radius: 10upx;
		}

		.body-c {
			margin-left: 20upx;

			.c-title {
				color: #444;
				font-size: 28upx;
			}

			.group-price {
				color: #e1212b;
				font-size: 34upx;
			}

			.normal-price {
				margin-left: 30upx;
				color: #777;
				font-size: 16upx;
				text-decoration: line-through;
			}

		}
	}

	.detail {
		width: 100%;
		margin-top: 20upx;
		min-height: 700upx;
		border-radius: 10upx;

		.openTime {
			padding-top: 50upx;
			line-height: 50upx;
			color: #aaa;
		}

		.endTime {

			height: 100upx;
			line-height: 100upx;

			.sub {
				position: relative;
				text-align: center;
				width: 80%;
				margin: 0upx auto;
				height: 62upx;
				font-size: 14px;
				color: #aaa;

				&::before,
				&::after {
					content: "";
					position: absolute;
					top: 80%;
					border: solid 1upx #f1f1f1;
					width: 20%;
				}

				&::before {
					left: 0;
				}

				&::after {
					right: 0;
				}
			}

		}

		.group-count {
			//margin-top: 40upx;
			color: #777;
		}

		.user {
			margin-left: 30upx;
			margin-right: 30upx;
			margin-top: 60upx;
			padding-bottom: 10upx;
			border-bottom: solid 1upx #f1f1f1;

			image {
				height: 100upx;
				width: 100upx;
				border-radius: 20upx;
			}

			.user-title {
				margin-left: 20upx;
				margin-top: 20upx;

				.user-title-name {
					color: #444;

				}

				.user-title-time {
					color: #aaa;
					margin-top: 10upx;
				}
			}

			.user-group-b {
				line-height: 100upx;
				color: #e1212b;
			}
		}

		.btn-info {
			margin-top: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80%;
				height: 70upx;
				background: linear-gradient(to right, $base, $change-clor);
				border-radius: 100rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				opacity: 1;
			}
		}
	}
</style>